<template>
    <div class="login_container">
        <div class="login_box">
            <!-- 登录表单区域 -->
            <el-form size="mini">
                <!-- 用户名 -->
                <el-form-item>
                    <el-input placeholder="用户名" v-model="user.username"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item>
                    <el-input placeholder="密码" show-password v-model="user.password" type="password"></el-input>
                </el-form-item>
                <!-- 验证码 -->

                <!-- 记住我 -->
                <el-form-item>
                    <el-checkbox v-model="remember">记住密码</el-checkbox>
                </el-form-item>
                <!-- 登录按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    export default {
        created() {
            if (document.cookie.length > 0) {
                const cookieArr1 = document.cookie.split(";");
                for (let i in cookieArr1) {
                    const cookieArr2 = cookieArr1[i].split("=");
                    //避免输入中含有空格，消除文本框空格
                    cookieArr2[0] = cookieArr2[0].replace(/\s+/g, "");
                    cookieArr2[1] = cookieArr2[1].replace(/\s+/g, "");
                    if (cookieArr2[0] == "userName") {
                        //读取cookie然后进行解码
                        this.user.username = window.atob(cookieArr2[1]);
                    } else if (cookieArr2[0] == "passWord") {
                        this.user.password = window.atob(cookieArr2[1]);
                    }
                }
            }
        },
        data(){
            return{
                remember: true,
                user:{
                    username:'',
                    password:'',
                }
            }
        },
        methods: {
            login(){
                const that = this
                console.log(this.remember)
                let manager={
                    username:this.user.username,
                    password:this.user.password,
                }
                console.log(manager)
                this.$http.manager.login(manager).then(function(resp) {
                    if(resp.msg==="响应成功"){

                        let time = new Date();
                        if (that.remember){
                            time.setTime(time.getTime() + 24 * 60 * 60 * 1000 * 30);
                        }else{
                            time.setTime(time.getTime()- 1);
                        }
                        //加上window.btoa是为了对用户名和密码进行编码，不让cookie明文展示
                        window.document.cookie = `userName=${window.btoa(that.user.username)}; path=/; expires=${time.toGMTString()}`;
                        window.document.cookie = `passWord=${window.btoa(that.user.password)}; path=/; expires=${time.toGMTString()}`

                        window.sessionStorage.setItem("user",that.user.username);
                        that.$router.push({path:'/home',query: {username:that.user.username}})
                        // alert(JSON.stringify(that.user))//可以直接把that.user对象传给后端进行校验用户名和密码
                    }else{
                        that.$message.error(resp.msg)
                    }
                })

            },
        }
    }
</script>
<style scoped>
    .login_container {
        background-image: linear-gradient(-180deg, #1a1454 0%, #0e81a5 100%);
        background-image: url('../assets/images/bg.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
    }
    .login_box {
        width: 290px;
        height: 350px;
        /* background-color: #fff; */
        background-color: #2e527bb3;
        border-radius: 5px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .el-form {
        padding: 32px;
        position: absolute;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .el-button {
        width: 100%;
    }
    .rememberMe {
        color: #fff;
    }
    .el-image {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #C0C4CC;
        vertical-align: middle;
    }
</style>
